<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="doAjaxGetJSON()">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxPostJSON()">$.postJson(...)</button>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>
    </div>
    <div id="result"></div>
    <script src="js/jquery.min.js"></script>
    <script>
        function doAjaxLoad(){
            let url="http://localhost:8080/doGet"
            //2.send ajax get request
            //jquery 中load函数语法.load(url[,params][,callback])
            $("#result").load(url,function (){
                console.log("load complete");
            });
        }
        function doAjaxPostJSON(){//向服务端直接提交json格式字符串
            let url="http://localhost:8080/doPostJSON"
            let params={id:2,name:"huawei",letter:"h"}//js对象
            $.ajax({
                type:"post",
                url:url,
                data:JSON.stringify(params),
                contentType:"application/json;charset=utf-8",//client-->server
                success:function(result) {
                    $("#result").html(result);
                }
            })
        }
        function doAjaxPost(){
            let url="http://localhost:8080/doPost";
            //let params="id=1&name=xiaomi&letter=x";
            let params={id:2, name:"huawei", letter:"h"};//js对象//let params={"id":"2","name":"huawei","letter":"h"};
            //3.send ajax post request
            $.post(url,params,function (result){
                console.log(result);
            })
        }
        function doAjaxGetJSON(){
            //1.url
            let url="http://localhost:8080/doGet";
            //2.params
            let params="";
            //3.send ajax get request
            $.getJSON(url,params,function(result){//success
                console.log(result);//json格式的对象
            });
        }
        function doAjaxGet(){
            //1.url
            let url="http://localhost:8080/doGet";
            //2.params
            let params="";
            //3.send ajax get request
            $.get(url,params,function(result){//success
                console.log(result);//json格式的对象
            },"json");
        }
        function doAjax(){
            //debugger
            //1.请求url
            let url="http://localhost:8080/doAjax";
            //2.请求参数
            let params={msgs:"hello jquery ajax"};
            //let params="msgs=hello jquery ajax";
            //3.发送异步ajax请求
            //$.ajax函数为jquery中的一个ajax函数
            $.ajax({
                type:"GET",
                url:url,
                data:params,
                dataType:"text",//server-->client
                async:true,
                success:function(result) {//readyState==4&&status==200
                    $("#result").html(result);//innerHTML
                },
                error:function(xhr){//readyState==4&&status!=200
                    $("#result").html("request fail");
                    console.log(xhr);//XmlHttpRequest
                }//服务端没有处理的异常假如抛给了客户端则会执行error部分内容
            });
        }
    </script>
</body>
</html>